@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Oswald:wght@300;400;500;600&display=swap');

:root {
  --font1: 'Montserrat', 'Roboto', sans-serif;
  --font2: 'Oswald', 'Roboto', sans-serif;
    
  --bgr-color1: #998cbf; 
  --bgr-color2: rgba(255, 255, 255, 0.3);
  --bgr-color3: #c0b3e9;
  --bgr-image: url('https://fs.getcourse.ru/fileservice/file/download/a/933846/sc/310/h/0cc2a6b3faa0f4c56c4b3f900ea640b5.jpeg');
    
  --color-white: #ffffff;
  --color-black: #252422;
  --color-1: #9366c3;
  --color-2: #cad0cf;
  --color-3: #c3c3c3;
  --color-4: #f7f7f7;
    
  --i-width: 62px;
  --i-height: 62px;
  --i-width2: 24px;
  --i-height2: 24px;
  --i-width3: 35px;
  --i-height3: 47px;
  --b-radius: 8px;
  --b-radius-2: 6px;
  --shadow: 0px 5px 8px rgba(0, 0, 0, 0.05);
  
  --avatar: url('https://fs.getcourse.ru/fileservice/file/download/a/933846/sc/300/h/fe38b193db155c10917d3d9cdf959ebb.png');
  --button-small: url('https://fs.getcourse.ru/fileservice/file/download/a/933846/sc/233/h/ce2774faa0cd3671238a24ef19dbb228.png');
  --item-cms: url('https://fs.getcourse.ru/fileservice/file/download/a/933846/sc/62/h/88066027ca7949e9dd16d4edc5661302.png');
  --item-teach: url('https://fs.getcourse.ru/fileservice/file/download/a/933846/sc/146/h/048d134fdd7933935cf3e219f41b0df1.png');
  --item-user: url('https://fs.getcourse.ru/fileservice/file/download/a/933846/sc/395/h/6b27dee325b63cef2e283fa77c91efec.png');
  --item-tasks: url('https://fs.getcourse.ru/fileservice/file/download/a/933846/sc/136/h/55e11c534f791c41ecc0174d5371dcf1.png');
  --item-notif: url('https://fs.getcourse.ru/fileservice/file/download/a/933846/sc/208/h/7e626bd75e6a4e76e78c076a28a21e6d.png');
  --item-sales: url('https://fs.getcourse.ru/fileservice/file/download/a/933846/sc/151/h/9689d84fd4ff48d91802d68438cf99e8.png');
  --item-chatium: url('https://fs.getcourse.ru/fileservice/file/download/a/933846/sc/274/h/8dd981d4a350cf1ccc1cc293ead07240.png');

  --filter1: invert(24%) sepia(25%) saturate(1558%) hue-rotate(224deg) brightness(86%) contrast(87%);
  --filter2: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(103%) contrast(103%);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font2)!important;
    padding: 20px;
}

 
li.menu-item.menu-item-search {
    display: none;
}

.gc-account-leftbar {

    background-color: var(--bgr-color1);
    background-image: var(--bgr-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left top;
}

.gc-account-leftbar .gc-account-user-menu li.selected a, .gc-account-leftbar .gc-account-user-menu li.active a {
    background: rgb(147 131 131 / 30%);
}

.gc-account-leftbar {
   
    width: 90px!important;
}
.gc-main-content.with-left-menu {    

    margin-left: 90px;
}

.gc-account-leftbar .gc-account-user-submenu-bar {
  
    left: 90px;
}


@media (max-width: 768px) {
    .gc-account-leftbar .gc-account-user-menu {
        width: 90px;
    }
    .gc-account-leftbar:not(.expanded) {
        width: 100%!important;
    }
}

@media (max-width: 380px) {
    
    .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small {
        width: 220px;
    }
}

.gc-account-leftbar .gc-account-user-menu {

    background: transparent;
}

.gc-account-leftbar .gc-account-user-submenu-bar {

    background-color: var(--bgr-color3);
    background-image: var(--bgr-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

.gc-account-leftbar .gc-account-user-menu li {

    border-bottom: none;
}

.gc-account-leftbar .gc-account-user-menu li a {
    
    display: block;
  
    width: var(--i-width);
    height: var(--i-height);
    
    background: var(--bgr-color2);
 
    box-shadow: var(--shadow);
    
    border-radius: var(--b-radius);
  
    margin: 10px auto;
  
    transition: all 0.3s;
}

.gc-account-leftbar .gc-account-user-menu li:hover a {
    
    background: var(--color-2);
}


.gc-account-leftbar .gc-account-user-menu li.selected a,
.gc-account-leftbar .gc-account-user-menu li.active a {
 
    background: var(--color-2);
}


.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small a {
  
    height: var(--i-height)!important;
}

.gc-account-user-menu li.menu-item-marathon {
    display: none;
}
.gc-account-leftbar .menu-item-label {
    display: block;
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: -3px;
    margin-top: 3px;
    font-size: 9px;
}

li.menu-item-notifications_button_small a img,
li.menu-item-cms a img,
li.menu-item-teach a img,
li.menu-item-user a img,
li.menu-item-tasks a img,
li.menu-item-notifications a img,
li.menu-item-sales a img,
li.menu-item-chatium a img {
    display: none;
}

li.menu-item-notifications_button_small a::before,
li.menu-item.menu-item-cms a::before,
li.menu-item.menu-item-teach a::before,
li.menu-item.menu-item-user a::before,
li.menu-item.menu-item-tasks a::before,
li.menu-item.menu-item-notifications a::before,
li.menu-item.menu-item-sales a::before,
li.menu-item.menu-item-chatium a::before {  
    content: '';
   
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
   
    display: block;
    width: var(--i-width2);
    height: var(--i-height2);
   
    filter: var(--filter1);
}


li.menu-item-notifications_button_small a::before {background-image: var(--button-small);}
li.menu-item.menu-item-cms a::before {background-image: var(--item-cms);}
li.menu-item.menu-item-teach a::before {background-image: var(--item-teach);}
li.menu-item.menu-item-user a::before {background-image: var(--item-user);}
li.menu-item.menu-item-tasks a::before {background-image: var(--item-tasks);}
li.menu-item.menu-item-notifications a::before {background-image: var(--item-notif);}
li.menu-item.menu-item-sales a::before {background-image: var(--item-sales);}
li.menu-item.menu-item-chatium a::before {background-image: var(--item-chatium);}


li.menu-item-profile .menu-item-icon {
  
    width: var(--i-width);
    height: var(--i-height);
   
    border-radius: var(--b-radius);
   
    border: 3px solid var(--color-2);
}


.gc-account-user-menu li.menu-item-profile a img {
    display: none;
}


.gc-account-user-menu li.menu-item-profile a::before {
    content: '';
   
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
   
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    display: block;
    width: var(--i-width3);
    height: var(--i-height3);
    background-image: var(--avatar);
}


.gc-account-user-menu li.menu-item-profile a img:not([src="/public/img/default_profile_50.png"]) {
    position: relative;
    
    z-index: 0;
    
    display: block;
    margin: 0 auto;
}

.sub-icon img.user-profile-image {
   
    border-radius: var(--b-radius);
   
    border: 2px solid var(--color-2);
}


.gc-account-user-submenu-bar h3 {

    font-size: 26px;
   
    font-weight: 500;
   
    color: var(--color-1);
    
    border-bottom: 1px solid var(--color-1);
    
    padding-bottom: 20px;
    padding-left: 20px;
    
    margin-top: 30px;
    margin-bottom: 10px;
}


.gc-account-user-submenu-bar .gc-account-user-submenu li a {
    
    font-size: 16px;
   
    font-weight: 400;
    
    text-transform: capitalize;
  
    color: var(--color-black);
    transition: all 0.5s;
}

.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
    background: transparent;
    
    color: var(--color-1);
}


.gc-account-user-menu li a:hover::before,

.gc-account-user-menu li.active a::before,
.gc-account-user-menu li.selected a::before {
    
    filter: var(--filter2);
}


.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications_button_small .notify-count {
    z-index: 2;
   
    font-size: 0.8em!important;
  
    font-weight: 700;
   
  text-align: center;
  
   color: var(--color-white);
    
    background: var(--color-1);
    
    border-radius: var(--b-radius-2);
   
    position: absolute;
   bottom: 24px;
    right: 4px;
 
    padding: 2px 0px;
}


.gc-account-leftbar .notify-count.with-label {
    bottom: 22px;
    right: 5px;
    top: 24px;
    left: 59px;
    border-radius: var(--b-radius-2);
    padding: 2px 0px;
    background: #9366c3;
    position: absolute;
}

.gc-account-leftbar .notify-count {
    font-weight: bold;
    width: 30px;
    text-align: center;
    color: white;
    font-size: 0.8em;
}
/* Счетчик уведомлений - разделы левой панели */
/* сообщения */
/*.gc-account-leftbar .gc-account-user-menu li.menu-item-notifications .notify-count,
/* обучение */
/*.gc-account-leftbar li.menu-item-teach .notify-count,
/* покупки */
/*.gc-account-leftbar li.menu-item.menu-item-sales .notify-count {
   /* z-index: 2;
    /* размер шрифта */
   /* font-size: 0.8em!important;
    /* толщина написания */
  /*  font-weight: 700;
    /* выравнивание по центру */
    /*text-align: center;
    /* цвет текста уведомлений */
    /*color: var(--color-white);
    /* цвет фона уведомлений */
    /*background: #9c739e;
    /* скругление границы фона */
    /*border-radius: var(--b-radius-2);
    /* позиционирование */
   /* position: absolute;
   /* bottom: 24px;
    /*right: 4px;
    /* внутренние отступы */
    /*padding: 1px 0px;
}*/

   .gc-account-leftbar .gc-account-user-menu li.menu-item-notifications .notify-count {
    background: #9366c3;
}

.gc-account-leftbar .gc-account-user-submenu li .notify-count {
    z-index: 2;

    font-weight: 700;
  
    text-align: center;
    
   color: var(--color-white);

    background: var(--color-1);

    border-radius: var(--b-radius-2);
}


.user-balance {
   
   
    margin-top: 20px!important;
    margin-bottom: 10px;
}

.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small {
   
    background: var(--color-4);
}

.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .header {
    background: var(--color-1);
    color: var(--color-white);
    margin-top: 0;
    padding: 20px;
}

.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group {
    
    background: var(--color-white);
   
    color: var(--color-black);
    transition: all 0.3s;
}

.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group:hover {
    
    background-color: transparent;
    
    color: var(--color-black);
}

.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed {
    
    background-color: transparent;
    
    color: var(--color-4);
    transition: all 0.3s;
}

.gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small .notification-group.notification-status-viewed:hover {
 
    color: var(--color-black);
}


@media (max-width: 768px) {
    .gc-account-leftbar.expanded,
    .gc-account-leftbar {
        
        background-color: var(--bgr-color1);
        background-image: var(--bgr-image);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left top;
    }
    
    .gc-account-leftbar .gc-account-user-submenu-bar {
        
        background-position: center top;
    }
   
    .gc-account-leftbar .toggle-link {
        
        background-color: var(--bgr-color1);
    }
   
    .gc-page-nav-items-menu a {
        
        color: var(--color-white);
        
        background-color: var(--bgr-color1);
    }
}

@media (max-width: 460px) {
   
    .gc-account-user-submenu-bar h3 {
        
        font-size: 20px!important;
    }
    
    .gc-account-user-submenu-bar .gc-account-user-submenu li a {
         
         font-size: 14px!important;
    }
}

@media (max-width: 380px) {
   
    .gc-account-leftbar .gc-account-user-submenu-bar-notifications_button_small {
        width: 240px;
    }
}
}
and (orientation: landscape) {
    .gc-account-leftbar.expanded,
    .gc-account-leftbar {
        
        background-image: none;
       
    }
   
    .gc-account-leftbar .gc-account-user-submenu-bar {
      
        background-image: none;
       
    }
}